<template>
  <div class="hiprint-page">
    <el-button id="btn" type="primary" @click="printOne">不预览直接单个模板打印</el-button>
    <el-button id="btn" type="primary" @click="printMore">不预览直接多个模板打印</el-button>
    <div id="print-cont" class="print-cont"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import $ from "jquery";
import "@/components/hiprint/utils/hiprint.config";
import { hiprint, autoConnect } from "@/components/hiprint";
import templateJson from "./res/templateJson";
import printData from "./res/printData";
import templateJson2 from "./res/templateJson2";
import printData2 from "./res/printData2";
const initPrint = () => {
  const hiprintTemplate = new hiprint.PrintTemplate({
    template: templateJson,
  });
  nextTick(() => {
    $("#print-cont").html(hiprintTemplate.getHtml(printData));
  });
};

initPrint();
autoConnect();
const printOne = () => {
  const hiprintTemplate = new hiprint.PrintTemplate({
    template: templateJson,
  });

  if (hiprint.hiwebSocket.opened) {
    hiprintTemplate.print2(printData);
  } else {
    alert("请先连接客户端(刷新网页), 然后再点击「直接打印」");
  }
};
const printMore = () => {
  let hiprintTemplate = new hiprint.PrintTemplate({
    template: templateJson,
  });
  let hiprintTemplate2 = new hiprint.PrintTemplate({
    template: templateJson2,
  });
  // 多模板直接打印
  hiprint.print2(
    {
      templates: [
        { template: hiprintTemplate, data: printData, options: {} },
        { template: hiprintTemplate2, data: printData2 },
      ],
      options: { printer: "", landscape: true },
    },
    function (data: any) {
      console.log("printSuccess");
    },
    function (e: any) {
      console.log("printError");
    }
  );
};
</script>

<style scoped>
</style>